<template>
  <div style="height: 100%" class="echarts_box">
    <div class="echarts_title_box">
      <div class="echarts_title" style="font-size: 18px">设备报警柱状图</div>
      <el-radio-group v-model="radio" @change="handleRaiod">
        <el-radio :label="3">周</el-radio>
        <el-radio :label="2">月</el-radio>
        <el-radio :label="1">年</el-radio>
      </el-radio-group>
    </div>
    <div style="height: 100%" class="chart" ref="chart"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lineChart: null,
      radio: 2,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      seriesData: [5, 20, 40, 10, 10, 20, 11, 13, 2, 17, 21, 12],
    };
  },
  methods: {
    handleRaiod(val) {
      switch (val) {
        case 3:
          this.seriesData = [5, 20, 40, 10];
          this.data = ["当月第一周", "当月第二周", "当月第三周", "当月第四周"];
          break;
        case 2:
          this.seriesData = [5, 20, 40, 10, 10, 20, 11, 13, 2, 17, 21, 12];
          this.data = [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ];
          break;
        case 1:
          this.seriesData = [210, 110, 20, 40, 210, 110, 10];
          this.data = [
            "2015年",
            "2016年",
            "2017年",
            "2018年",
            "2019年",
            "2020年",
            "2021年",
          ];
          break;
        default:
          break;
      }
      this.init();
    },
    init() {
      var option = {
        tooltip: {
          show: true,
        },
        legend: {
          show: false,
        },
        xAxis: [
          {
            axisLabel: {
              show: true,
              textStyle: {
                //轴上文字
                color: "aqua", //颜色
              },
            },
            type: "category",
            data: this.data,
          },
        ],
        yAxis: [
          {
            axisLabel: {
              show: true,
              textStyle: {
                color: "aqua", //轴字体
              },
            },
            type: "value",
          },
        ],
        series: [
          {
            name: "单位:条",
            type: "bar",
            data: this.seriesData,

            itemStyle: {
              normal: {
                //这里是重点
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#83bff6" },
                  { offset: 0.5, color: "#188df0" },
                  { offset: 1, color: "#188df0" },
                ]),
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "aqua",
                    fontSize: 16,
                  },
                },
              },
            },
          },
        ],
      };
      this.$nextTick(() => {
        this.lineChart = this.$echarts.init(this.$refs.chart);
        console.log("lineChart :>> ", this.lineChart.setOption);
        //   option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
        //   option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
        //   option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
        //   option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;
        this.lineChart.setOption(option);
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped lang='scss'>
.echarts_box {
  position: relative;
  .echarts_title_box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
    padding-left: 6px;
    /deep/ .el-radio__label {
      color: #fff;
    }
    .echarts_title {
      color: #fff;
      font-size: 18px;
    }
  }
  .dec_3 {
    position: absolute;
    top: 6px;
    left: 10px;
  }
  .chart {
    width: 100%;
    /* height: 260px; */
  }
}
</style>